<!DOCTYPE html>
<html>

	<head>
		<meta charset=utf-8">
		<title>Canvas homework</title>
		<style>
			.left
			{
				float:left;
			}
		</style>
	</head>


	<body>
		<div class="left">
			<canvas id="simpleRectangle" width="450" height="350" >
				Your browse does not support HTML 5 canvas.
			</canvas>
			<br />
			<canvas id="rectangleInRectangle" width="600" height="600" >
				Your browse does not support HTML 5 canvas.
			</canvas>
		</div>
		<canvas id="letters" width="600" height="1100" class="left">
			Your browse does not support HTML 5 canvas.
		</canvas>
	</body>

<script>
	var simpleRectangle = document.getElementById('simpleRectangle');
	var simpleRectangleContext = simpleRectangle.getContext('2d');
	simpleRectangleContext.fillStyle = "rgb(142,00,57)";
	simpleRectangleContext.fillRect(5,5,400,300);
	simpleRectangleContext.fillStyle = "rgb(172,43,80)";
	simpleRectangleContext.fillRect(8,8,394,294);
	
	var rectangleInRectangle = document.getElementById('rectangleInRectangle');
	var rectangleInRectangleContext = rectangleInRectangle.getContext('2d');
	//Draw first border
	rectangleInRectangleContext.fillStyle = "rgb(180,246,61)";
	rectangleInRectangleContext.fillRect(80,20,400,300);
	//Draw black rectangle
	rectangleInRectangleContext.fillStyle = "rgb(00,00,00)";
	rectangleInRectangleContext.fillRect(83,23,394,294);
	//Draw second border
	rectangleInRectangleContext.fillStyle = "rgb(199,246,111)";
	rectangleInRectangleContext.fillRect(180,120,200,100);
	//Draw second rectangle
	rectangleInRectangleContext.fillStyle = "rgb(172,43,80)";
	rectangleInRectangleContext.fillRect(183,123,194,94);
	
	//Draw letters
	var pathCanvas = document.getElementById('letters');
	var letterContext = pathCanvas.getContext('2d');
	
	letterContext.beginPath();
	//Draw L
	letterContext.moveTo(20,20);
	letterContext.lineTo(20,250);
	letterContext.lineTo(120,250);
	//Draw A
	letterContext.moveTo(140,250);
	letterContext.lineTo(170,20);
	letterContext.lineTo(200,250);
	letterContext.moveTo(155,135);
	letterContext.lineTo(185,135);
	//Draw C
	letterContext.moveTo(300,240);
	letterContext.arc(300,130,110,(Math.PI)/2,(-Math.PI)/2,false);
	//Draw H
	letterContext.moveTo(320,20);
	letterContext.lineTo(320,250);
	letterContext.moveTo(320,135);
	letterContext.lineTo(360,135);
	letterContext.moveTo(360,20);
	letterContext.lineTo(360,250);
	//Draw O
	letterContext.moveTo(620,130);
	letterContext.arc(490,130,110,0,Math.PI*2,true);
	
	//Draw M
	letterContext.moveTo(20,300);
	letterContext.lineTo(20,600);
	letterContext.moveTo(20,300);
	letterContext.lineTo(90,500);
	letterContext.lineTo(160,300);
	letterContext.lineTo(160,600);
	//Draw I
	letterContext.moveTo(200,350);
	letterContext.lineTo(200,380);
	letterContext.moveTo(200,400);
	letterContext.lineTo(240,600);
	//Draw N
	letterContext.moveTo(310,600);
	letterContext.lineTo(260,400);
	letterContext.lineTo(380,580);
	letterContext.lineTo(365,400);
	//Draw K
	letterContext.moveTo(20,700);
	letterContext.lineTo(50,900);
	letterContext.moveTo(90,730);
	letterContext.lineTo(35,800);
	letterContext.lineTo(190,920);
	//Draw O
	letterContext.moveTo(350,940);
	letterContext.lineTo(250,920);
	letterContext.lineTo(230,750);
	letterContext.lineTo(300,700);
	letterContext.lineTo(400,730);
	letterContext.lineTo(420,900);
	letterContext.lineTo(350,940);
	//Draw V
	letterContext.moveTo(450,820);
	letterContext.lineTo(475,945);
	letterContext.lineTo(520,650);
	letterContext.strokeStyle = "rgb(172,43,80)";
	letterContext.stroke();
</script>
</html>